import React from 'react';
import './index.less';
import {render} from 'ader';
import {Card, Button} from 'antd';
import LeftAction from '@/actions/left';

export default render({
    models: ['home'],
    actions: {
        left: LeftAction
    }
})(({props, action, state}) => {
    const {home} = props;

    return (
        <div className="page-left-content">
            {home.modules.map((module, index) => {
                return (
                    <Card
                        title={module.name}
                        key={`module_${index}`}
                        className="left-module-card"
                    >
                        {home[module.field].map((item, index) => {
                            return (
                                <Button 
                                    className="page-layout-item"
                                    key={index}
                                    onClick={action.left.clickItem(module, item)}
                                    type="primary"
                                >
                                    {item.name}
                                </Button>
                            );
                        })}
                    </Card>
                );
            })}
        </div>
    );
});